<template>
  <div>
    <a-modal v-model:visible="visible" :title="title" @ok="handleOk" width="40%" :afterClose="closeMoadal"
      :rules="rules">
      <a-form :model="formData" ref="formRef" labelAlign="right" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">

        <a-form-item label="商品名：" name="good_name" :rules="[{ required: true }]">
          <a-input allowClear v-model:value="formData.good_name" :maxlength="25" placeholder="请输入" />
        </a-form-item>

        <a-form-item label="商品售价：" name="good_price" :rules="[{ required: true }]">
          <a-input allowClear v-model:value="formData.good_price" type="number" :maxlength="25" placeholder="请输入" />
        </a-form-item>

        <a-form-item label="单位：" name="scale" :rules="[{ required: true }]">
          <a-input allowClear v-model:value="formData.scale" :maxlength="25" placeholder="请输入" />
        </a-form-item>

        <a-form-item label="库存：" name="good_store" :rules="[{ required: true }]">
          <a-input allowClear v-model:value="formData.good_store" type="number" :maxlength="25" placeholder="请输入" />
        </a-form-item>

        <a-form-item label="状态：" name="status" :rules="[{ required: true }]">
          <a-select v-model:value="formData.status"  placeholder="选择状态" style="width: 200px">
            <a-select-option value="1">上架</a-select-option>
            <a-select-option value="0">下架</a-select-option>
          </a-select>
        </a-form-item>


        <a-form-item label="当前图片" v-if="type === 1">
          <div class="img-box-g"><img :src="serverUrl + row.data.img" alt=""></div>
        </a-form-item>

        <a-form-item label="更换商品图片：">
          <Upload @getImgpath="getImgpath"></Upload>
        </a-form-item>

      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { ref, reactive, onMounted } from 'vue';
import { editehosiptal } from '@/common/http.api.js'
import Upload from '@/components/upload/index.vue'
import { editgood, addgood } from '@/common/http.api.js'

const rules = reactive({
  good_name: { required: true, message: '不能为空', trigger: 'blur' },
  good_price: { required: true, message: '不能为空', trigger: 'blur' },
  scale: { required: true, message: '不能为空', trigger: 'blur' },
  good_store: { required: true, message: '不能为空', trigger: 'blur' },
})



const serverUrl = 'http://127.0.0.1:3000'
const emitFrensh = defineEmits(['on-close']) // 注册事件
const props = defineProps({
  row: {
    type: Object,
    default: {},
  },
});
const type = ref()
const title = ref('')
const formData = ref({
  gID: '',
  status: '1',
  good_price: '',
  good_name: '',
  good_store: '',
  scale: '',
  img: ''
})

if (Object.keys(props.row.data).length === 0) {
  type.value = 0
  title.value = '新增商品'

} else {
  type.value = 1
  title.value = '修改商品信息'
  let { gID, status, good_price, good_name, good_store, scale, img } = props.row.data
  formData.value = {
    gID,
    status,
    good_price,
    good_name,
    good_store,
    scale: scale.slice(1, 2),
    img,
  }
}

const visible = ref(true)
const frensh = ref(0)
const getImgpath = (url) => {
  formData.value.img = url
}

const formRef = ref()

const handleOk = async () => {
  formRef.value
    .validate()
    .then(async () => {
      if (type.value === 1) {
        await editgood(formData.value)
        message.success('修改成功！')

      } else {
        await addgood(formData.value)
        message.success('添加成功！')
      }
      frensh.value++
      visible.value = false
    })
    .catch((error) => {
      console.log("error", error);
    });

}

function closeMoadal() {
  emitFrensh('on-close', frensh.value)
}

</script>

<style lang="less" scoped>
.img-box-g {
  width: 120px;
  height: 120px;
}
</style>